/* 기본 리셋 및 폰트 설정 */
body {
    margin: 0;
    padding: 0;
    font-family: 'Battambang', serif; /* 이미지처럼 세리프체 사용 */
    background-color: #EFEFEF; /* 밝은 배경 */
    color: #333333;
    overflow-x:hidden; /* 가로 스크롤 방지 */
}

/* 전체 화면 섹션 */
.full-screen {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* 헤더 스타일 */
header {
    width: 100%;
    position: absolute;
    top: 20px;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-family: 'Archivo';
    font-weight: 900;
}
.center-text {
    position: absolute;
    font-family: 'Archivo';
    left: 50%;
    transform: translateX(-50%);
}

/* 홈 섹션 */
#home-section {
    cursor: pointer; /* 클릭 가능한 느낌을 주기 위함 */
}
.content-wrapper {
    position: relative;
    display: block;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.main-title {
    font-size: 200pt;
    font-weight: 600;
    margin: 0;
    line-height: 1;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'Battambang', serif;
}
.click-hint {
    position: absolute;
    bottom: 40px;
    font-size: 0.9rem;
    opacity: 0.6;
    transition: opacity 0.3s;
}
#home-section.clicked .click-hint {
    display: none; /* 클릭 후 힌트 숨김 */
}

/* 1. 홈 섹션: 카세트테이프 스택 애니메이션 */
#tape-stack-container {
    position: absolute;
    /* ARCHIVE 텍스트의 가운데 하단에 위치하도록 조정 */
    bottom: -100px; /* 초기 위치 조정 */
    left: 50%;
    transform: translateX(-50%);
}

.stacked-tape {
    position: absolute;
    width: 300px; /* 테이프 크기 */
    height: 58px;
    /* 테이프 이미지 사용: 사용자의 실제 이미지를 background-image로 대체 */
    background-color: #333;
    border: 1px solid #111;
    display: block;
    opacity: 0;
    transition: all 0.5s ease-out; /* 부드러운 애니메이션 */
    transform: translate(0, 50px) rotate(0deg); /* 초기 상태: 아래에서 시작, 투명 */
}

/* 쌓이는 애니메이션 효과 (JavaScript에서 'active' 클래스 추가) */
.stacked-tape.active {
    opacity: 1;
    transform: translate(var(--tape-x), var(--tape-y)) rotate(var(--tape-rot));
    z-index: 10;
}
/* 예시로 텍스트 라벨을 추가하는 경우 (이미지 대신) */
.tape-label {
    color: white;
    font-size: 0.7rem;
    padding: 5px;
    background: rgba(100, 100, 100, 0.7);
}


/* 2. 아카이브 섹션: 프로젝트 목록 (스크롤 후) */
#archive-section {
    background-color: #f0f0f0;
    padding-top: 100px;
    height: auto; /* 내용 길이에 따라 높이 자동 조정 */
    min-height: 100vh;
}
.archive-wrapper {
    width: 80%;
    max-width: 1200px;
    margin: 50px auto;
}
.tape-list-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 50px;
}

.project-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    transition: transform 0.3s ease;
}

.tape-vertical {
    width: 58.41px; /* 세로 테이프 크기 */
    height: 347.08px;
    object-fit: cover;
    display: block;
    /* 테이프 이미지 교체 필요 */
    background-color: #333;
    border: 1px solid #111;
    cursor: pointer;
}
/* style.css 파일 */

/* -------------------------------------- */
/* 1. 홈 섹션: 카세트테이프 스택 (CSS Only - Multiple Checkbox) */
/* -------------------------------------- */

/* 모든 클릭 영역을 중앙에 겹쳐서 전체 화면처럼 보이게 함 */
.click-area {
    position: absolute;
    width: 300px; /* 클릭 영역 크기 (예시) */
    height: 300px; /* 클릭 영역 크기 (예시) */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 5; /* 텍스트보다 아래에 위치 */
}

/* ARCHIVE 텍스트가 클릭 영역보다 위에 오도록 z-index 조정 */
.main-title {
    /* 기존 스타일 유지 */
    z-index: 6; 
}


/* 테이프 초기 상태 (숨겨진 상태) */
.stacked-tape {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    position: absolute;
    width: 150px; 
    height: 100px;
    /* 초기 위치: 아래에서 시작하는 느낌 */
    transform: translate(var(--initial-x, 0), var(--initial-y, 100px)) rotate(var(--initial-rot, 0deg));
}

/* 3. 각 테이프의 최종 위치와 초기 위치 정의 */

/* Tape 1 설정 */
.tape-1 {
    z-index: 12;
    --final-x: -15px; --final-y: 40px; --final-rot: 2deg;
    --initial-x: 0px; --initial-y: 150px; /* 시작 위치 조정 */
}
/* Tape 2 설정 */
.tape-2 {
    z-index: 11;
    --final-x: 10px; --final-y: 0px; --final-rot: -5deg;
    --initial-x: 20px; --initial-y: 150px;
}
/* Tape 3 설정 */
.tape-3 {
    z-index: 10;
    --final-x: -5px; --final-y: -40px; --final-rot: 3deg;
    --initial-x: -20px; --initial-y: 150px;
}

/* 4. 체크박스가 체크되었을 때 (클릭되었을 때) 테이프 활성화 */
/* 각 체크박스의 라벨(click-area) 안에 있는 테이프에만 적용 */

#trigger-1:checked ~ .area-1 .stacked-tape.tape-1,
#trigger-2:checked ~ .area-2 .stacked-tape.tape-2,
#trigger-3:checked ~ .area-3 .stacked-tape.tape-3 {
    opacity: 1;
    transform: translate(var(--final-x), var(--final-y)) rotate(var(--final-rot));
    transition-delay: 0.1s; /* 클릭 후 약간의 딜레이 후 등장 */
}